import React, { memo } from "react";
import s from './style.module.less';
import {Article,Search,Swiper,Uppbar} from '../../components/index'
import * as actionTypes from './store/action'
import { connect } from "react-redux";
import { useEffect } from "react";
function Home(props) {
     let zanNum=parseInt(100*Math.random()) 
     let mesNum=parseInt(100*Math.random())
     let icon={zan:'#icon-good',zanNum,mes:'#icon-pinglun',mesNum}
     let {mainData}=props
     let {getMainDataDispatch}=props
     console.log(mainData,getMainDataDispatch);
     useEffect(()=>{
         if(mainData.length==0)
            getMainDataDispatch()
     },[])
     let {list=[]}=mainData
     return(
         <div className={s.main}>
             <div>
                <Search/>
                <Uppbar/>
             </div>
             {/* //Scroll包裹 */}
             <div>
                <Swiper/>
             </div>
             {list.map(
                 (item,index)=><div className={s.article}><Article
                    key={item.id}
                    title={item.title}
                    author={item.author} 
                    pic={item.pic} 
                    text={item.text} 
                    label={item.label} 
                    icon={icon}
                    time={item.time}
                    />
                    </div>
                )
            }
         </div>
     )
}
     const mapStateToProps = (state) => {
        return {
            mainData: state.home.maindata
        }
    }
    const mapStateToDisPatch = (dispatch) => {
        return {
            getMainDataDispatch() {
                dispatch(actionTypes.getMainData())
            }
        }
    }
 
 export default connect(mapStateToProps,mapStateToDisPatch)((Home))
